<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /* 
    一位数组中每一个元素必须要包含以下属性：

    拥有一个唯一的id：例：taskUuid
    拥有一个父id, 这个id指向它父级的id 例：parentTaskUuid
    */
    const list = [
      { taskUuid: 1, name: '超级管理', parentTaskUuid: 0 },
      { taskUuid: 2, name: '用户管理', parentTaskUuid: 1 },
      { taskUuid: 3, name: '部门管理', parentTaskUuid: 1 },
      { taskUuid: 4, name: '日志管理', parentTaskUuid: 1 },
      { taskUuid: 5, name: '操作用户', parentTaskUuid: 2 },
      { taskUuid: 6, name: '查看用户', parentTaskUuid: 2 },
      { taskUuid: 7, name: '用户新增', parentTaskUuid: 5 },
      { taskUuid: 8, name: '用户删除', parentTaskUuid: 5 },
      { taskUuid: 9, name: '用户修改', parentTaskUuid: 5 },
      { taskUuid: 10, name: '操控部门', parentTaskUuid: 3 },
      { taskUuid: 11, name: '查看部门', parentTaskUuid: 3 },
      { taskUuid: 12, name: '部门新增', parentTaskUuid: 10 },
      { taskUuid: 13, name: '部门删除', parentTaskUuid: 10 },
      { taskUuid: 14, name: '部门修改', parentTaskUuid: 10 },
      { taskUuid: 15, name: '日志查看', parentTaskUuid: 4 },
      { taskUuid: 16, name: '日志导出', parentTaskUuid: 4 }
    ]


    /* 
    1. 先将数组中的每一个节点按照父id作为属性名放到对象中(相同父id的节点放进一个此父id对应的属性数组) 
    =>{'0':[{...,parentTaskUuid: 0}],'1':[{...,parentTaskUuid: 1},{...,parentTaskUuid: 1},{...,parentTaskUuid: 1}],}
    2. 递归调用，传入整个对象及父id，

    */


    /**
     * 树状的算法
     * @params list     代转化数组
     * @params parentId 起始节点
     */
    function getTrees(list, parentId) {
      let items = {};
      // 获取每个节点的直属子节点，*记住是直属，不是所有子节点
      for (let i = 0; i < list.length; i++) {
        let key = list[i].parentTaskUuid; // 获取每一项的分类值
        if (items[key]) {  // 如果已经有了分类值
          items[key].push(list[i]);
        } else {  // 如果分类值还未添加到对象中
          items[key] = []; // 让对象中的属性值为数组
          items[key].push(list[i]); // 添加进属性数组 items:{key:list[i]}
        }
      }
      console.log(items);
      return formatTree(items, parentId); // 闭包
    }

    /**
     * 利用递归格式化每个节点
     */
    function formatTree(items, parentId) {
      let result = [];
      // 如果对象中没有传入的父id就返回空数组
      if (!items[parentId]) {
        return result;
      }
      // 遍历每一个属性数组
      for (let t of items[parentId]) {
        // console.log(t);
        // 对象中增加一个属性children,递归调用，传入对象items，每一项的id
        t.children = formatTree(items, t.taskUuid)
        // console.log(t);
        result.push(t);// 把每项添加进数组
      }
      return result;
    }

    console.log(getTrees(list, 0))

    
  </script>
</body>

</html>